<!-- 自定义带有增加/删除的inputTable -->
<!--使用:成本评审明细table -->
<template>
	<!-- <div>
		以梦为马不负韶华{{ scope123 }}
		子组件双向绑定父组件的值,如果后期有需要,使用pinia进行数据处理!!
		<el-input v-model="scope123.data.formData[scope123.data.item.key]" :placeholder="scope.data.item.placeHolder" />
	</div> -->
	<div>
		<!-- {{ scope123.data.formData[scope123.data.item.key] }} -->
		<!-- {{ oldArray }} -->
	</div>

	<div class="test">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
			<v-table :data-list="dataArray" v-bind="tableConfig">
				<!-- scope.row.index可以获取当前数组中每一个对象的index!,这也是dataArray遍历时,会自动添加index属性的原因!! -->
				<template #item="scope">
					<div class="box">
						<el-input v-model="scope.row[scope.prop.slotName]" :placeholder="`请输入${scope.prop.label}`" />
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
				<template #materialCost="scope">
					<div class="box">
						<el-input v-model="scope.row[scope.prop.slotName]" :placeholder="`请输入${scope.prop.label}`" />
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
				<template #laborCost="scope">
					<div class="box">
						<el-input v-model="scope.row[scope.prop.slotName]" :placeholder="`请输入${scope.prop.label}`" />
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
				<template #footer="scope">
					<el-button class="icon-e" icon="ele-CirclePlus" text type="primary" @click="addClick"> 新 增 </el-button>
					<el-button class="icon-e" icon="ele-Remove" text type="danger" @click="delClick"> 移 除 </el-button>
				</template>
			</v-table>
		</el-card>
	</div>
</template>

<!-- 可以增减的input文本框列表 -->
<!-- 成本评审-修改中使用 -->
<script setup lang="ts">
import { defineProps, reactive } from 'vue';

import vTable from '/@/components/table/v-table.vue';
const props = defineProps({
	defaultObj: {
		type: Object,
		default: () => ({}),
	},
	dataArray: {
		type: [Array] as any[],
		default: () => {
			[];
		},
	},
	scope: {
		type: Object,
		default: () => ({}),
	},
	tableConfig: {
		type: Object,
		default: () => ({}),
	},
});
const addClick = () => {
	dataArray.push(JSON.parse(JSON.stringify(props.defaultObj)));
	oldArray.push({ item: '', materialCost: '', laborCost: '' });
	// scope123.data.formData[scope123.data.item.key].push(JSON.parse(JSON.stringify(props.defaultObj)));
};
const delClick = () => {
	if (dataArray.length <= 1) {
		return;
	}
	dataArray.pop();
	oldArray.pop();
	// scope123.data.formData[scope123.data.item.key].pop();
};
const scope123 = reactive(props.scope);
const dataArray = reactive(props.dataArray);
//深拷贝dataArray,oldArray作为原有对象
const oldArray = JSON.parse(JSON.stringify(dataArray));

defineExpose({
	dataArray,
});
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<scope lang="scss" scoped>
.box {
	position: relative;
	overflow: hidden;
}
.box-con {
	width: 10px;
	height: 10px;
	position: absolute;
	background: #ff5566;
	top: -5px;
	left: -5px;
	transform: rotate(45deg);
}
</scope>
